<template>
    <!-- 查看详情问题情况插件 -->
    <div>
        <div class="s-particularsS">
            <Row class="s-particularsI">
                <Col span=3><span>类型</span>：</Col>
                <Col span=18 class="s-partcolor">{{partic.TYPE_CONTENT}}</Col>
            </Row>
            <Row class="s-particularsI">
                <Col span=3><span>标题</span>：</Col>
                <Col span=18 class="s-partcolor">{{partic.EVENT_TITLE}}</Col>
            </Row>
            <Row class="s-particularsIt">
                <Col span=3><span>内容</span>：</Col>
                <Col span=18 class="s-partcolor">{{partic.EVENT_CONTENT}}</Col>
            </Row>
            <Row v-if="this.partic.IMGS">
                <div v-for="item in ImgArr" :key="item.id" v-if="item">
                    <img :src="item" alt="" class="s-particularsImg" @click='showImg(item)'>
                </div>
            </Row>
        </div>
        <pinchzoom :src="src" v-show="pinchzoom" @closeImg="closeImg"/>
    </div>
</template>

<script>
export default {
    props: ['partic'],
    data() {
        return {
            pinchzoom: false,
            src: ''
        }
    },
    methods: {
        showImg(src) {
            this.src = src
            this.pinchzoom = true
        },
        closeImg() {
            this.pinchzoom = false
        }
    },
    components: {
        pinchzoom: () => import('@/components/common/pinchzoom/pinPage.vue') // 放大图片的公共组件
    },
    computed: {
        ImgArr: function() {
            return this.partic.IMGS.split(',').map(item => this.$store.state.Host + '/itfer-qkfy/rest/files/pictures/' + item)
        }
    }
}
</script>  

<style lang="less">
.s-particularsS{
    padding-left:20px;
    background-color:white;
    .s-particularsI{
        padding:20px 0;
        border-bottom:1px solid #E4E4E4;
        .s-partcolor{
        color:#A7A7A7;
        word-wrap: break-word;
        }
    }
    .s-particularsIt{
        padding:20px 0;
        .s-partcolor{
        color:#A7A7A7;
        word-wrap: break-word;
        }
    }
    .s-particularsImg{
        float: left;
        margin-bottom:10px;
        width: 70px;
        height: 70px;
        padding: 3px;
        border: 1px solid #eaeaea;
    }
}
</style>
